let data=null;
//Array.from(类数组)====》数组
let cloumns=Array.from(document.querySelectorAll(".cloumn"));
let imgboxs=null;
//1. 获取数据  ajax四步
function getData(){
   //1.创建 XMLHttpRequest 核心对象
   let xhr=new XMLHttpRequest;
   //2.建立连接
   xhr.open("get","data.json",false);
   //3.注册监听
   xhr.onreadystatechange=function(){
     if(xhr.readyState===4&&xhr.status===200){
        data=JSON.parse(xhr.response);
     }
   }
   //4.发送数据
   xhr.send();
}
getData();

//2. 循环渲染
function render(){
    //发现数据图片的宽度，过宽，与自己写图片大小不相符
    //1. 先统一处理数据图片的宽度
    data.map((item)=>{
        //取出每个元素的 宽度 和 高度
        let {width,height}=item;
        item.width=230;//重新设置宽度
        item.height=230*height/width;//按比例重新设置高度
        return item;//返回当前设置完成的元素
    })

    let groups;//[0,1,2] [3,4,5]...
    for(let i=0;i<data.length;i+=3){//i=0 3 6...
        groups=data.slice(i,i+3)// 0-3  3-6  6-9...
        groups.sort((a,b)=>{//每组元素按照 height [小中大]排列
            return a.height-b.height;
        })
    
        cloumns.sort((a,b)=>{//每列按照 offsetHeight [大中小]排列
            return b.offsetHeight-a.offsetHeight;
        })

        //循环对应 索引下表 一一插入
        //1组 [0,1,2]
        //2组 [3,4,5]
        groups.forEach((item,index)=>{
            let {id,pic,height,title}=item;
            let str=`<div class="item" data-id="${id}">
                        <div class="imgbox" style="height:${height}px">
                            <img src="" data-src="${pic}" alt="" style="height:${height}px">
                        </div>
                        <p>${title}</p>
                    </div>`
            cloumns[index].innerHTML += str;
        })
    }

    imgboxs=document.querySelectorAll(".imgbox");
}
render()

//图片展示
function showimg(img){
   let dataSrc=img.getAttribute("data-src");
   //相当于 小探兵
   let newimg=document.createElement("img");
   newimg.src=dataSrc;
   newimg.onload=function(){//路径正确，就会执行，不正确就不执行
      img.src=dataSrc;
      newimg=null;
      img.flag=true;
   }
}
//3.功能   3.1 图片懒加载
function handle(){
   let ob=new IntersectionObserver((changes)=>{
       //console.log(changes);//数组--[51]  51项，每一个都是对象
       changes.forEach((change)=>{//change---对象
           if(change.isIntersecting){//true 图片显示
              //在可视窗口交叉出现的图片盒子下面的图片---9
               let img=change.target.querySelector("img");
               if(img.flag){//如果图片已经加载---性能优化
                  ob.unobserve(change.target);//不在监听当前盒子
                  return;
               }
               showimg(img);//不会再次加载图片
           }
       })
   },{
      threshold:[1]//完全出现--图片加载
   })
   
   imgboxs.forEach((imgbox)=>{
      ob.observe(imgbox)
   })
}
handle()